<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2024/6/4
  Time: 10:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后端登录页面</title>
    <%--引入elementui的css样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <%--引入vue文件:必须先引入vue--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入elementui的js文件--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <%--引入axios--%>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="login_container">
    <h1 style="color: white">菜先生</h1>
    <!-- 登录盒子  -->
    <div class="login_box">
        <!-- 头像 -->
        <div class="avatar_box">
            <img src="/images/cxs.jpeg" alt="">
        </div>
        <!-- 登录表单 -->
        <el-form :model="loginForm" ref="LoginFormRef" label-width="0px" class="login_form" >
            <!-- 用户名 -->
            <el-form-item prop="username">
                <el-input  v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-s-grid"></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item class="btns">
                <el-button type="primary" size="small" @click="login()">登录</el-button>
                <el-button type="info" size="small">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: "#login_container",
        data: {
            loginForm:{
                username:"123",
                password:"123456"
            },
        },
        created(){},
        methods:{
            login(){
                axios.post("/empinfo/login",this.loginForm).then(result=>{
                     if(result.data.code===2000){
                          this.$message.success(result.data.msg);
                          location.href="/views/main"
                     }else{
                         this.$message.error(result.data.msg);
                     }
                })
            }
        }
    })
</script>
<style>
    html,body,#login_container{
        margin: 0px;
        padding: 0px;
        font-size: 12px;
    }
    #login_container{
        width: 100%;
        height: 100%;
        background: url("/images/bg.jpg") no-repeat center 0px;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
    }
    h1{
        position: absolute;
        left: 74%;
        top: 33%;
    }
    .login_box {
        width: 350px;
        height: 220px;
        background: #fff;
        border-radius: 3px;
        position: absolute;
        left: 90%;
        top: 70%;
        transform: translate(-90%, -70%);

    }

    .login_box > .avatar_box {
        height: 60px;
        width: 60px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 2px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;

    }

    .login_box > .avatar_box > img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }

    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        top:50px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .btns {
        display: flex;
        justify-content: flex-end;
    }
</style>
</html>
